<template>
	<view class="">
	<my-search @gotSearch='gotSearch'></my-search>
		<view class="scroll-view">
			<!-- 左侧滑动区 -->
		<scroll-view class="left_scroll" scroll-y="true" :style="{height:wh+'px'}">
			<view :class="['left_item',{active:index===num}]" v-for="(item,index) in categoriesList" :key="item.cat_id" @click="leftclick(index)">
			
				<text>{{item.cat_name}}</text>
			</view>
		</scroll-view>
		<!-- 右侧滑动区 -->
		<scroll-view  style="background-color: #fff;" scroll-y="true"  :style="{height:wh+'px'}" :scroll-top="scrollTop">
			<view v-for="(cateTow,index) in caregTwo" :key="cateTow.cat_id">
				<view class="right_text">
				<text>/{{cateTow.cat_name}}/</text>
				</view>
				<view class="right_img">
					<view class="img_x" v-for="(el,index) in cateTow.children" :key="el.cat_id" @tap="gotgoods(el)">
						<image :src="el.cat_icon" mode="widthFix"></image>
						<text>{{el.cat_name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
		import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins:[badgeMix],
		data() {
			return {
				// 当前手机的可用高度
				wh:0,
				categoriesList:[],
				num:0,
				// 二级分类
				caregTwo:[],
				scrollTop:0
			}
		},
		methods: {
			getCategories(){
				this.request({
					url:`/public/v1/categories`
				}).then(({data:res})=>{
					console.log(res)
					this.categoriesList=res.message
					this.caregTwo=res.message[0].children
				})
			},
			leftclick(index){
				this.num=index
				this.caregTwo=this.categoriesList[index].children
				this.scrollTop=this.scrollTop===0?1:0
			},
			gotgoods(item){
				uni.navigateTo({
					url:`/subpkg/goods_list/goods_list?cid=${item.cat_id}`
				})
			},
			// 组件的自定义事件
			gotSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		},
		onLoad(){
			// 获取手机的高度，和可使用的高度
			const system=uni.getSystemInfoSync()
			this.wh=system.windowHeight-50
			this.getCategories()
		}
	}
</script>

<style lang="scss">
.scroll-view{
	display: flex;
	.left_scroll{
		width: 120px;
		.left_item{
			background-color: #F7F7F7;
			text-align: center;
			line-height: 60px;
			&.active{
				background-color: #fff;
				position: relative;
				&::before{
					content:' ';
					display:block;
					width: 3px;
					height: 30px;
					background-color: #c00000;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0,-50%);
				}
			}
		}
	}
	.right_text{
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
	.right_img{
		display: flex;
		flex-wrap: wrap;
	.img_x{
		width: 33.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}
		image{
			width: 60px;
			height: 60px;
		}
		text{
			font-size: 24rpx;
		}
		
	}
}
</style>
